<template>
    <div class="payment-result">
        <!-- 筛选条件 -->
        <condition-card @search="search" @reset="reset">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="学期">
                        <CalendarSelect v-model="query.calendarId"></CalendarSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="年级">
                        <GradeSelect v-model="query.grade"></GradeSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="学院">
                        <DictSelect
                            v-model="query.faculty"
                            :data="options.faculty"
                            @change="handleChangeFaculty"
                            multiple
                        ></DictSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="专业">
                        <DictSelect v-model="query.profession" :data="options.profession" multiple></DictSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="培养层次">
                        <DictSelect
                            v-model="query.trainingLevel"
                            :data="options.trainingLevel"
                            multiple
                        ></DictSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="培养类别">
                        <DictSelect
                            v-model="query.trainingCategory"
                            :data="options.trainingCategory"
                        ></DictSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="学位类型">
                        <DictSelect v-model="query.degreeType" :data="options.degreeType"></DictSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="学习形式">
                        <DictSelect v-model="query.formLearning" :data="options.formLearning"></DictSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="缴费状态">
                        <DictSelect v-model="query.paymentStatus" :data="options.paymentStatus"></DictSelect>
                    </el-form-item>
                </el-col>
            </el-row>
        </condition-card>
        <el-card shadow="never">
            <h2>缴费结果查询</h2>
            <el-row type="flex" align="middle" class="mb-8px">
                <el-col class="text-right">
                    <el-button @click="exportFile">导出</el-button>
                </el-col>
            </el-row>
            <edu-table
                :order="false"
                :data="paymentList.data"
                :total="paymentList.total"
                @page-change="pageChange"
                @selection-change="handleSelectionChange"
            >
                <el-table-column label="学期">
                    <template slot-scope="scope">{{scope.row.studentId}}</template>
                </el-table-column>
                <el-table-column label="学号">
                    <template slot-scope="scope">{{scope.row.studentId}}</template>
                </el-table-column>
                <el-table-column label="姓名">
                    <template slot-scope="scope">{{scope.row.studentName}}</template>
                </el-table-column>
                <el-table-column label="年级">
                    <template slot-scope="scope">{{scope.row.grade}}</template>
                </el-table-column>
                <el-table-column label="学院">
                    <template slot-scope="scope">{{scope.row.currentFaulty}}</template>
                </el-table-column>
                <el-table-column label="专业">
                    <template slot-scope="scope">{{scope.row.currentProfession}}</template>
                </el-table-column>
                <el-table-column label="培养层次">
                    <template slot-scope="scope">{{scope.row.trainingLevel}}</template>
                </el-table-column>
                <el-table-column label="培养类别">
                    <template slot-scope="scope">{{scope.row.trainingCategory}}</template>
                </el-table-column>
                <el-table-column label="学位类别">
                    <template slot-scope="scope">{{scope.row.degreeType}}</template>
                </el-table-column>
                <el-table-column label="学习形式">
                    <template slot-scope="scope">{{scope.row.formLearning}}</template>
                </el-table-column>
                <el-table-column label="缴费状态">
                    <template slot-scope="scope">
                        <el-tag :type=" scope.row.paymentStatus === '1' ? 'success' : 'danger'">已缴费</el-tag>
                    </template>
                </el-table-column>
            </edu-table>
        </el-card>
    </div>
</template>
<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import * as API from "common/src/api/abnormalType/abnormal";
export default {
    name: "paymentResult",
    components: {},
    data() {
        return {
            query: {
                calendarId: "",
                grade: "",
                trainingLevel: "",
                faculty: "",
                profession: "",
                trainingCategory: "",
                degreeType: "",
                formLearning: "",
                paymentStatus: ""
            },
            options: {
                trainingLevel: [],
                faculty: [],
                profession: [],
                formLearning: [],
                degreeType: [],
                trainingCategory: [],
                paymentStatus: [
                    {
                        label: "0",
                        value: "未缴费"
                    },
                    {
                        label: "1",
                        value: "已缴费"
                    }
                ]
            },
            selectItems: [],
            paymentList: {
                total: 0,
                data: [{ paymentStatus: "1" }]
            }
        };
    },
    created() {
        this.initOptions();
    },
    mounted() {},
    methods: {
        // 获取筛选条件字段下拉数据
        initOptions() {
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_YX", "X_PYCC", "X_PYLB", "X_XWLX", "X_XXXS"]
            };
            queryDic(data).then(res => {
                if (res.code === 200) {
                    UTILS.fillSelect(
                        {
                            faculty: "X_YX",
                            trainingLevel: "X_PYCC",
                            trainingCategory: "X_PYLB",
                            degreeType: "X_XWLX",
                            formLearning: "X_XXXS"
                        },
                        res.data,
                        this.options
                    );
                }
            });
        },
        // 根据学院获取专业
        handleChangeFaculty(val) {
            this.options.profession = [];
            this.query.profession = "";
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["G_ZY"],
                filter: {
                    prefix: val,
                    specilaCode: "XY2ZY"
                }
            };
            queryDic(data).then(res => {
                if (res.code === 200) console.log(res, res);
                UTILS.fillSelect(
                    {
                        profession: "G_ZY"
                    },
                    res.data,
                    this.options
                );
            });
        },
        reset() {
            this.qurey.calendarId = "";
            this.qurey.grade = "";
            this.qurey.trainingLevel = "";
            this.qurey.faculty = "";
            this.qurey.profession = "";
            this.qurey.trainingCategory = "";
            this.qurey.degreeType = "";
            this.qurey.formLearning = "";
            this.qurey.paymentStatus = "";
        },
        pageChange(val) {
            this.query.pageNum_ = val.pageNum;
            this.query.pageSize_ = val.pageSize;
        },
        handleSelectionChange(val) {
            this.selectItems = val;
        },
        exportFile() {}
    },
    computed: {
        currentUser() {
            if (this.$store.state.session.user) {
                return this.$store.state.session.user;
            }
            return JSON.parse(localStorage.getItem("user"));
        },
        mockUser() {
            if (this.$store.state.session.mockUser) {
                return this.$store.state.session.mockUser;
            }
            return JSON.parse(localStorage.getItem("sessiondata")).mockUser;
        }
    }
};
</script>
<style lang="scss" scoped>
.payment-result {
}
</style>
